﻿<form id="frmBXJGWorkOrderWorkOrder" class="frm-container">
    <input type="hidden" name="id" value="0" />
    <table class="frm-box">
        <tr>
            <th>标题</th>
            <td colspan="3">
                <input name="title" class="easyui-textbox" data-options="width:600, required:true, validType:'length[1,500]',prompt:'简短、准确的标题...'" />
            </td>
        </tr>
        <tr>
            <th class="top">图片</th>
            <td colspan="5" id="frmWorkOrderUploader" class="imgUploader-container" style=" padding:7px 0;">
                <div id="frmWorkOrderUploaderPicker" class="imgUploader-picker">选择图片</div>
                <div class="imgUploader-images" style="max-width:830px;">
                    <!--图片预览区，支持拖拽、截图粘贴...
                <div class="imgUploader-img-container">
                    <a href="javascript:void(0);">×</a>
                    <img src="http://demo.dtcms.net/upload/201504/20/thumb_201504200119256512.jpg" />
                    <i class="imgUploader-img-success">上传完成</i>
                </div>-->
                </div>
            </td>
        </tr>
        <tr>
            <th class="top">内容</th>
            <td colspan="3" style=" padding:7px 0;">
                <input name="description" class="easyui-textbox" data-options="width:600,multiline:true, height:100,  validType:'length[0,5000]',prompt:'工作内容详细描述...'" />
            </td>
        </tr>
        <tr>
            <th>类别</th>
            <td style="width:200px;"><input name="categoryId" /></td>
            <th>紧急程度</th>
            <td style="width:200px;"><input name="urgencyDegree" /></td>
        </tr>
        <tr>
            <th>处理人</th>
            <td><input name="employeeId" /> </td>
            <th></th>
            <td></td>
        </tr>
        <tr>
            <th>预计开始时间</th>
            <td><input class="easyui-datetimebox" name="estimatedExecutionTime"></td>
            <th>预计结束时间</th>
            <td><input class="easyui-datetimebox" name="estimatedCompletionTime"></td>
        </tr>
        <tr>
            <th>执行时间</th>
            <td><input class="easyui-datetimebox" name="executionTime"></td>
            <th>完成时间</th>
            <td><input class="easyui-datetimebox" name="completionTime"></td>
        </tr>
        <tr>
            <th>状态</th>
            <td><input name="status" /></td>
            <th>状态时间</th>
            <td><input class="easyui-textbox" name="statusChangedTime" data-options="" /></td>
        </tr>
        <tr>
            <th class="top">状态说明</th>
            <td colspan="3" style=" padding:7px 0;">
                <input name="statusChangedDescription" class="easyui-textbox" data-options="width:600,multiline:true, height:100, validType:'length[0,500]',prompt:'拒绝原因/完成情况/其它说明...'" />
            </td>
        </tr>
        <!--<tr>
        <th class="top">关联信息</th>
        <td colspan="3" class="dynamicAssociate"></td>
    </tr>-->
    </table>
</form>
<script>


    (function () {
        const m = 'BXJGWorkOrderWorkOrder';
        const $dlg = $('#dlg' + m);
        const $frm = $dlg.find('form');
        const id = $dlg.data('id');
        const $name = $frm.find('[name="title"]');
        const $cls = $frm.find('[name="categoryId"]');
        const $status = $frm.find('[name="status"]');
        const $employeeId = $frm.find('[name="employeeId"]');
        const $urgencyDegree = $frm.find('[name="urgencyDegree"]');
        const clsId = $dlg.data('clsId');
        const $uploader = $('#frmWorkOrderUploader');
        const $uploaderImages = $uploader.find('.imgUploader-images');
        //const $dynamicAssociate = $frm.find('.dynamicAssociate');
        //let dynamicAssociateData = undefined;



        $cls.combotree({
            url: abp.appPath + 'api/services/bxjgworkorder/WorkOrderCategoryProvider/GettreeForSelect',
            queryParams: { forType: 4 }
        });

        $status.combobox({
            editable: false,
            url: abp.appPath + 'api/services/bxjgworkorder/WorkOrderCommon/GetAllStatus',
            queryParams: { forType: 4 }
        });

        $urgencyDegree.combobox({
            editable: false,
            url: abp.appPath + 'api/services/bxjgworkorder/WorkOrderCommon/GetAllUrgencyDegree',
            queryParams: { forType: 4 }
        });

        $employeeId.combogrid({
            method: 'GET',
            editable: true,
            mode: 'remote',
            idField: 'id',
            textField: 'name',
            panelWidth: 223,//所有列宽+列数*1px+1px
            delay: 500,
            //pagination: true,
            url: abp.appPath + 'api/services/bxjgworkorder/employee/getall',
            queryParams: { forType: 1 },
            prompt: '==' + abp.localization.bxjgWorkOrder('员工') + '==',
            columns: [[
                { field: 'name', title: '姓名', width: 120 },
                { field: 'phone', title: '电话', width: 120 }
            ]]
        });

        //initDynamicAssociate();

        $dlg.data('clickSave', function () {
            //验证录入
            if (!$frm.form('validate'))
                return;

            //处理简单的表单数据
            var postData = $frm.serializeJSON();

            //处理图片
            var files = uploader.getFiles('complete');
            postData.images = new Array();
            files.forEach(function (currentValue, index, arr) {
                postData.images.push({ absoluteFileUrl: currentValue.serverUrl });
            });

            let defer;
            if (id) {
                defer = abp.services.bxjgworkorder.workOrder.update(postData).done(function (d) {
                    abp.notify.success(abp.localization.bxjgUtils('修改') + abp.localization.bxjgUtils('成功') + '!');
                    onSaved('onUpdated');
                });
            } else {
                defer = abp.services.bxjgworkorder.workOrder.create(postData).done(function (d) {
                    abp.notify.success(abp.localization.bxjgUtils('新增') + abp.localization.bxjgUtils('修改') + '!');
                    onSaved('onAdded');
                });
            }
            abp.ui.setBusy($dlg, defer);
        });

        function onSaved(funcName) {
            var f = $dlg.data(funcName);
            if (f)
                f();
        }

        setTimeout(function () {
            $name.next('span').find('input').focus();
        }, 0);





        if (id) {
            let initFormTask = abp.services.bxjgworkorder.workOrder.get({ id: id }).done(function (d) {
                $frm.form('load', d);
            });
            abp.ui.setBusy($dlg, initFormTask);
        } else {
            $cls.combotree('setValue', clsId);
        }

        //图片上传开始-------------------------------------
        let uploader = WebUploader.create({

            // 选完文件后，是否自动上传。
            auto: true,

            // swf文件路径
            swf: '/lib/webuploader-0.1.5/Uploader.swf',

            // 文件接收服务端。
            server: abp.appPath + 'api/bxjgfile/upload',

            // 选择文件的按钮。可选。
            // 内部根据当前运行是创建，可能是input元素，也可能是flash.
            pick: '#frmWorkOrderUploaderPicker',

            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        uploader.on('uploadSuccess', function (file, response) {
            file.serverUrl = response.result[0].fileUrl;
            file.thumUrl = response.result[0].thumUrl;
        });
        uploader.on('fileQueued', function (file) {
            file.on('statuschange', function (n, o) {
                $i.removeClass('imgUploader-img-' + o);
                $i.addClass('imgUploader-img-' + n);
                let statusText = '';
                switch (n) {
                    case 'complete':
                        statusText = '已完成';
                        break;
                    case 'error':
                        statusText = '失败';
                        break;
                    case 'progress':
                        statusText = '上传中...';
                        break;
                    default:
                        statusText = file.statusText;
                }
                $i.text(statusText);
            });


            let $box = $('<div class="imgUploader-img-container">').appendTo($uploaderImages);
            let $a = $('<a>×</a>').appendTo($box);
            let $img = $('<img />').appendTo($box);
            let $i = $('<i />').appendTo($box);


            $a.on('click', function () {
                uploader.removeFile(file, true);
                $box.remove();
            });
            if (file.thumUrl) {
                $img.attr('src', abp.appPath + file.thumUrl);
                file.setStatus('complete');
            } else {
                uploader.makeThumb(file, function (error, src) {
                    if (error) {
                        $img.replaceWith('<span>不能预览</span>');
                        return;
                    }
                    $img.attr('src', src);
                });
            }
        });
        uploader.on('uploadBeforeSend', function (obj, data, headers) {
            headers.Authorization = "Bearer " + abp.getCurrentJWTToken();
            headers.createThum = true;
        });
        //图片上传结束-------------------------------------

        ////初始化动态关联实体
        //function initDynamicAssociate() {
        //    return abp.ui.setBusy($dlg, abp.services.bxjgDynamicAssociateEntity.dynamicAssociateEntity.getDefines('workOrder').done(function (d) {
        //        dynamicAssociateData = d;
        //        d.forEach(function (curr, index) {
        //            renderDynamicAssociateTree(curr).appendTo($dynamicAssociate);
        //            //$('<div style="float:left; width:200px;" />').appendTo($div);
        //        });
        //    }));
        //}


        ////渲染动态关联的一颗树
        //function renderDynamicAssociateTree(data) {
        //    let $div = $('<div class="dynamicAssociate-container" />')
        //    while (data) {
        //        let tempData = data;
        //        let $div1 = $('<div class="dynamicAssociate-item" />').appendTo($div);


        //        let $selector = $('<input id="selector' + tempData.name + '" parentname="' + tempData.parentName + '" />');
        //        let $checker = $('<input id="checkbox' + tempData.name + '" parentname="' + tempData.parentName + '" value="' + tempData.name + '" />').appendTo($div1);
        //        $checker.checkbox({
        //            label: tempData.displayName,
        //            value: tempData.name,
        //            onChange: function (checked) {
        //                if (checked) {
        //                    $selector.combo('enable');
        //                    let parent = $div.find('#checkbox' + tempData.parentName);
        //                    while (parent && parent.attr('parentname')) {
        //                        parent.checkbox('check');
        //                        parent = $div.find('#checkbox' + parent.attr('parentname'));
        //                    }
        //                }
        //                else {
        //                    $selector.combo('disable');
        //                    let child = tempData.child;
        //                    while (child) {
        //                        $div.find('#checkbox' + child.name).checkbox('uncheck');
        //                        child = child.child;
        //                    }
        //                }
        //            }
        //        });
        //        if (tempData.associateGranularity == 0) {
        //            //这里有bug，开个线程解决这个问题
        //            setTimeout(function () {
        //                $checker.checkbox('check');
        //            }, 0);
        //            $checker.checkbox('disable');
        //        }

        //        let columns = new Array();
        //        tempData.fields.forEach(function (curr, index) {
        //            if (!curr.isDisplayField)
        //                return;
        //            columns.push({
        //                field: curr.name,
        //                title: curr.displayName,

        //                width: curr.displayWidth > 0 ? curr.displayWidth : 200
        //            });
        //        });
        //        $selector.appendTo($div1).combogrid({
        //            width: 200,
        //            method: 'GET',
        //            editable: true,
        //            disabled: true,
        //            mode: 'remote',
        //            idField: tempData.keyField,
        //            textField: tempData.displayFields[0],
        //            panelWidth: 553,//所有列宽+列数*1px+1px
        //            delay: 500,
        //            pagination: tempData.needPagination,
        //            url: abp.appPath + 'api/services/bxjgDynamicAssociateEntity/DynamicAssociateEntity/getall',
        //            queryParams: { defineName: tempData.name },
        //            prompt: '==' + abp.localization.bxjgWorkOrder(tempData.displayName) + '==',
        //            columns: [columns],
        //            onBeforeLoad: function (params) {
        //                $.fn.combogrid.defaults.onBeforeLoad(params);
        //                if (tempData.parentName) {
        //                    params.parentId = $div.find('#selector' + tempData.parentName).combogrid('getValue');
        //                }
        //            }
        //        });





        //        data = data.child;
        //    }
        //    return $div;
        //}


    })();
</script>
